<template>
  <div class="app">
    <header class="header-box">
      <p class="header-item" @click="setCurrentPage('main')">main</p>
      <p class="header-item" @click="setCurrentPage('vue')">vue</p>
      <p class="header-item" @click="setCurrentPage('vue-about')">vue-about</p>
      <p class="header-item" @click="setCurrentPage('react')">React</p>
    </header>
    <main class="main-box">
      <RouterView></RouterView>
    </main>
  </div>
</template>

<script setup lang="ts">
import microApp from '@micro-zoe/micro-app'
import { RouterView, useRouter } from 'vue-router'
const router = useRouter()
const setCurrentPage = (page: string) => {
  switch (page) {
    case 'main':
      router.push('/')
      break
    case 'vue':
      console.log(123)
      router.push('/vue')
      break
    case 'vue-about':
      microApp.router.push({ name: 'vueApp', path: '/about' })
      break
    case 'react':
      router.push('/react')
      break
  }
}
</script>

<style scoped lang="scss">
.app {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .header-box {
    display: flex;
    justify-content: flex-start;
    padding: 15px;
    .header-item {
      width: 100px;
      text-align: center;
      border: 1px solid #f0f0f0;
      cursor: pointer;
      & ~ .header-item {
        margin-left: 10px;
      }
    }
  }
  .main-box {
    flex: 1;
    border: 1px solid #f0f0f0;
    padding: 15px;
    overflow: auto;
    .main-item {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
